<template>
	
	<view >
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="search-head">
			<view class="back" @click="back()">
				<uni-icon type="arrowleft" size="30" color="#999999"></uni-icon>
			</view>
			<view class="search-bar">
				<uni-icon type="search" color="#DBDBDB" size='20' style='margin: 15upx 30upx;'></uni-icon>
				<input placeholder="沈阳" v-model="searchText" type="text">
			</view>
			<view class='search-btn'>搜索</view>
		</view>
		
		<view class="crew">
			<view class="crew-list">
				<!-- <view class="disp">
					<view  class="dislinput"><input class="inpbac" type="text" placeholder="请输入搜索内容"></view>
					<view class="dislbutton"> <button>搜索</button></view>
				</view> -->
				<view class="crew-item" v-for="(item,index) in crewData" :key='index'>
					<view class="tip">{{item.address}}</view>
					<image :src="item.img"></image>
					<view class="name">
						<text>
							{{item.name}}
						</text>
					</view>
					<text class="price">￥{{item.price}} <text class="qi">起</text></text>
				</view>
			</view>
		</view>
		<view style="height: 19vw;"></view>
	</view>
</template>

<script>
	import FootMenu from '@/components/footMenu.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import HotelQuery from '@/components/hotelQuery.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				
				crewData:[
					{
						address:'本溪',
						name:'本溪大峡谷',
						img:'/static/myPic/daxiagu.jpg',
						price:'199',
					},
					{
						address:'沈阳',
						name:'沈阳+丹东 跟团游',
						img:'/static/myPic/daxiagu.jpg',
						price:'199',
					},
					
				],
				statusBarHeight:global.statusBarHeight + 'px',
				searchText:'',
				
			}
		},
		methods: {
			chooseSearch(str){
				this.searchText = str
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		created(){
			
		},
		components:{
			ShouyeOrder,
			FootMenu,
			HotelQuery,
			uniIcon
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.search-body{
		width: 100%;
		height: 100vh;
	}
	.search-head{
		width: 750upx;
		height: 60upx;
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		
	}
	.back{
		width: 60upx;
		height: 60upx;
		margin-left: 20upx;
		
	}
	.back uni-icon{
		width: 30upx;
		height: 30upx;
	}
	.search-bar{
		width: 500upx;
		border-radius: 30upx;
		height: 60upx;
		border: #BBBBBB solid 1upx;
		margin-left: 20upx;
		margin-right: 20upx;
		display: flex;
		flex-direction: row;
	}
	.search-bar input{
		width: 340upx;
		height: 40upx;
		display: block;
		margin-top: 6upx;
		font-size: 28upx;
		line-height: 40upx;
	}
	.search-btn{
		width: 130upx;
		height: 60upx;
		border-radius: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		
		margin-right: 20upx;
	}
	
	.crew{
		/* background: #F6F6F6; */
		width: 750upx;
		margin-top: 30upx;
		padding-bottom: 30upx;
		height: auto;
		display: table;
	}
	.crew-list{
		width: 704upx;
		margin-left: auto;
		margin-right: auto;
	}
	.crew-item{
		width: 340upx;
		height: 470upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		position: relative;
		border: 1upx #FFFFFF;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	}
	.crew-item:nth-child(odd){
		float: left;
	}
	.crew-item:nth-child(even){
		float: right;
	}
	.crew-item image{
		width: 340upx;
		height: 336upx;
		border-radius: 20upx 20upx 0 0 ;
	}
	.crew-item .tip{
		padding: 8upx;
		position: absolute;
		/* width: 80upx; */
		height: 36upx;
		color: #FFFFFF;
		font-size: 18upx;
		text-align: center;
		line-height: 36upx;
		max-width: 300upx;
		overflow: hidden;
		border-radius: 20upx 0 20upx 0;
		background: rgba(0,0,0,0.5);
		z-index: 5;
	}
	.name{
		width: 285upx;
		margin-left: 24upx;
		margin-top: 21upx;
		height:26upx;
		
	}
	.name text{
		width: 285upx;
		font-size: 26upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.price{
		font-size: 26upx;
		color: #DD540A;
		margin-right: 16upx;
		margin-top: 12upx;
		float: right;
	}
	.fen{
		font-size: 26upx;
		margin-left: 21upx;
		margin-top: 12upx;
		color: #555555;
	}
	.qi{
		font-size: 26upx;
		color: #555555;
	}
	.disp{
		display: flex;
		width: 690upx;
		margin:30upx auto;
		justify-content: space-between;
	}
	.dislbutton{
		float: right;
	}
	.dislbutton button{
		color: #FFFFFF;
		background-color:#2E8EFF;
		border-radius:40upx;
		border: 1px solid #2E8EFF;
		font-size: 28upx;
		width: 150upx;
		height: 70upx;
		line-height: 70upx;
	}
	.dislinput input{
		width: 480upx;
		height: 70upx;
		padding-left: 20upx;
		border: 1px solid #f5f5f5;
		border-radius:40upx;
		font-size: 14px;
		line-height: 70upx;
		background-color:#f5f5f5;
		background-image: url("/static/myPic/yinHangKa.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	.inpbac{
	}
</style>
